<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛商城后台管理系统</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 导航栏 -->
	<jsp:include page="navbar.jsp"></jsp:include>
	<!-- 数据展示 -->
	<div class="col-md-10 text-center panel" id="view">
		<!-- 展示操作路径 -->
		<div class="panel-heading text-left">
			<a href="welcome.jsp">系统管理</a>-><a href="userManage.jsp">用户管理</a>->
			<a href="javascript:void(0)">增加用户</a>
		</div>
		<div class="panel-body">
			<form class="form form-horizontal  col-md-push-1 col-md-10 ">
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="uaccount">用户账号：</label>
					</div>
					<div class="col-md-4">
						<input type="text" name="uaccount" id="uaccount"
							onblur="checkUaccount()" placeholder="请输入账号" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="uaccountMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="uname">用户昵称：</label>
					</div>
					<div class="col-md-4">
						<input type="text" name="uname" id="uname" onblur="checkUname()"
							placeholder="请输入昵称" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="unameMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="upsw">用户密码：</label>
					</div>
					<div class="col-md-4">
						<input type="password" name="upsw" id="upsw" onblur="checkUpsw()"
							placeholder="请输入新密码" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="upswMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="confirmpsw">确认密码：</label>
					</div>
					<div class="col-md-4">
						<input type="password" name="confirmpsw" id="confirmpsw"
							onblur="checkConfirmpsw()" placeholder="请输入新密码"
							class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="confirmpswMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="urole">用户角色：</label>
					</div>
					<div class="col-md-4">
						<select name="urole" id="urole" class="form-control">
							<option value="1">超级管理员</option>
							<option value="2" selected="selected">普通管理员</option>
						</select>
					</div>
				</div>
				<div class="form-group col-md-6">
					<button type="button" class="btn btn-mk btn-success"
						onclick="addAdmin()">保存</button>
					<button type="reset" class="btn btn-mk btn-warning">重置</button>
				</div>
			</form>
		</div>
	</div>
	<!-- 版权 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	let uaccountFlag = false;

	//增加管理员
	function addAdmin() {
		if (uaccountFlag && checkUname() && checkUpsw() && checkConfirmpsw()) {
			$.ajax({
				url : "../user",
				type : "post",
				data : {
					"opr" : "addAdmin",
					"uaccount" : $("#uaccount").val(),
					"uname" : $("#uname").val(),
					"upsw" : $("#upsw").val(),
					"urole" : $("#urole").val(),
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						if (confirm("用户增加成功,是否继续增加？")) {
							location.reload();
						} else {
							location.href = "userManage.jsp";
						}
					} else if (result.msg == "null") {
						alert("请重新登录！");
						location.href = "login.jsp";
					} else if (result.msg == "used") {
						$("#uaccountMsg").html(
								"<font color='red'>账号已被占用。</font>");
						uaccountFlag = false;
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//检查账号格式是否正确，是否唯一
	function checkUaccount() {
		let zz = /^[a-zA-Z0-9]{4,20}$/;
		let unameVal = $("#uaccount").val();
		if (zz.test(unameVal)) {
			$.ajax({
				url : "../user",
				type : "post",
				data : {
					"opr" : "checkUaccount",
					"uaccount" : unameVal
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						$("#uaccountMsg").html("<font color='green'>✔</font>");
						uaccountFlag = true;
					} else if (result.msg == "used") {
						$("#uaccountMsg").html(
								"<font color='red'>账号已被占用。</font>");
						uaccountFlag = false;
					} else {
						alert(result.msg);
						uaccountFlag = false;
					}
				}
			})
		} else {
			$("#uaccountMsg").html(
					"<font color='red'>账号由字母、数字组成，长度必须在4-20位之间。</font>");
			uaccountFlag = false;
		}
	}

	//检查新昵称格式是否正确
	function checkUname() {
		let zz = /^[a-zA-Z0-9\u4e00-\u9fa5]{4,10}$/;
		let unameVal = $("#uname").val();
		if (zz.test(unameVal)) {
			$("#unameMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#unameMsg").html(
					"<font color='red'>昵称由字母、数字和汉字组成，长度必须在4-10位之间。</font>");
			return false;
		}
	}

	//检查新密码格式是否正确
	function checkUpsw() {
		let zz = /^[a-zA-Z0-9]{6,20}$/;
		let upswVal = $("#upsw").val();
		if (zz.test(upswVal)) {
			$("#upswMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#upswMsg").html(
					"<font color='red'>密码由字母和数字组成，长度必须在6-20位之间。</font>");
			return false;
		}
	}

	//检查两个密码是否相等
	function checkConfirmpsw() {
		let upswVal = $("#upsw").val();
		let confirmpswVal = $("#confirmpsw").val();
		if (upswVal == confirmpswVal) {
			$("#confirmpswMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#confirmpswMsg").html("<font color='red'>两次密码不一致。</font>");
			return false;
		}
	}
</script>
</html>
